<template>
  <img ref="img" alt />
</template>
<script>
import axios from "axios";
export default {
  props: {
    src: {
      type: String,
      default: ""
    }
  },

  mounted() {
    this.getImg();
  },
  methods: {
    getImg() {
      const token = this.$store.state.auth.token;
      axios({
        url: this.src,
        method: "get",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then(response => {
          const reader = new window.FileReader();
          reader.readAsDataURL(response.data);
          reader.onload = () => {
            const imgUrl = reader.result;
            this.$refs.img.setAttribute("src", imgUrl);
          };
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    }
  }
};
</script>
